<!DOCTYPE html>
<html lang="en">
  <head>
    <title>jQuery Pinterest Grid Plugin Example</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i"
      rel="stylesheet"
    />

    <link
      rel="stylesheet"
      href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
    />

    <!-- <link rel="stylesheet" href="..//animate.css" />
    <script src="..//wow.min.js"></script> -->
    <style>
      body {
        background: #242323;
        font-family: "Roboto Condensed", sans-serif;
      }
      #blog-landing {
        margin-top: 81px;
        position: relative;
        max-width: 100%;
        width: 100%;
      }
      img {
        width: 100%;
        max-width: 100%;
        height: auto;
      }
      .white-panel {
        position: absolute;
        background: white;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
        padding: 10px;
      }
      .white-panel h1 {
        font-size: 1em;
      }
      .white-panel h1 a {
        color: #a92733;
      }
      .white-panel:hover {
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
        margin-top: -5px;
        transition: all 0.3s ease-in-out;
      }
    </style>
  </head>
  <!-- NAVBAR
================================================== -->
  <body>
    <div class="container marketing">
      <section id="blog-landing">
        <article
          class="white-panel wow slideInLeft"
          data-wow-duration="0.5s"
          data-wow-delay="0.5s"
        >
          <img src="002.jpg" alt="ALT" />
          <h1>
            <a href="#">Putting users first with flat design</a>
          </h1>

          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit.
          </p>
        </article>

        <article
          class="white-panel wow slideInUp"
          data-wow-duration="0.7s"
          data-wow-delay="0.7s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/03/5.png"
            alt="ALT"
          />
          <h1>
            <a href="#">Is your website converting visits into sales? </a>
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula
            enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper
            aliquam purus, et euismod justo. Nulla
          </p>
        </article>
        <article
          class="white-panel wow slideInDown"
          data-wow-duration="0.9s"
          data-wow-delay="0.9s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/03/4.png"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula,
          </p>
        </article>
        <article
          class="white-panel wow slideInRight"
          data-wow-duration="1s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/03/1.png"
            alt="ALT"
          />
          <h1><a href="#">Putting users first with flat design</a></h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula
            enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper
            aliquam purus, et euismod justo. Nulla
          </p>
        </article>
        <article
          class="white-panel wow slideInLeft"
          data-wow-duration="1.5s"
          data-wow-delay="1.5s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/03/9.gif"
            alt="ALT"
          />
          <h1>
            <a href="#">Is your website converting visits into sales? </a>
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula
          </p>
        </article>
        <article
          class="white-panel wow slideInLeft"
          data-wow-duration="1.5s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/03/h3.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula
            enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper
            aliquam purus, et euismod justo. Nulla
          </p>
        </article>
        <article
          class="white-panel wow slideInLeft"
          data-wow-duration="0.5s"
          data-wow-delay="0.5s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/03/h1.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula
            enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper
            aliquam purus, et euismod justo. Nulla
          </p>
        </article>
        <article
          class="white-panel wow slideInLeft"
          data-wow-duration="0.5s"
          data-wow-delay="0.5s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/about.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non so
          </p>
        </article>
        <article
          class="white-panel wow slideInLeft"
          data-wow-duration="0.5s"
          data-wow-delay="0.5s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/06.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis.
          </p>
        </article>
        <article
          class="white-panel wow slideInDown"
          data-wow-duration="1s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/01.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula
            enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper
            aliquam purus, et euismod justo. Nulla
          </p>
        </article>
        <article
          class="white-panel wow slideInUp"
          data-wow-duration="1.5s"
          data-wow-delay="1.5s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/7.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </article>
        <article
          class="white-panel wow slideInLeft"
          data-wow-duration="1.7s"
          data-wow-delay="1.7s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/4.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula
            enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper
            aliquam purus, et euismod justo. Nulla
          </p>
        </article>
        <article
          class="white-panel wow bounceInLeft"
          data-wow-duration="0.5s"
          data-wow-delay="0.5s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/1.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
          </p>
        </article>
        <article
          class="white-panel wow slideInUp"
          data-wow-duration="1.5s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/girl-1561989_1920.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula
            enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper
            aliquam purus, et euismod justo. Nulla
          </p>
        </article>
        <article
          class="white-panel wow slideInRight"
          data-wow-duration="1.5s"
          data-wow-delay="1.5s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/girl-1561989_1920.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula
            enim, auctor eget rutrum a
          </p>
        </article>
        <article
          class="white-panel wow slideInUp"
          data-wow-duration="1s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/01/4.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula
            enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper
            aliquam purus, et euismod justo. Nulla
          </p>
        </article>
        <article
          class="white-panel wow slideInRight"
          data-wow-duration="1.5s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/h2.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec,
          </p>
        </article>
        <article
          class="white-panel wow slideInDown"
          data-wow-duration="1.5s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/bmw.png"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin
          </p>
        </article>
        <article
          class="white-panel wow slideInUp"
          data-wow-duration="1.5s"
          data-wow-delay="1s"
        >
          <img src="nature-forest-trees-fog.jpeg" alt="ALT" />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit.
          </p>
        </article>
        <article
          class="white-panel wow slideInDown"
          data-wow-duration="1.5s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/2.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim
          </p>
        </article>
        <article
          class="white-panel wow bounceInLeft"
          data-wow-duration="1.5s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/8.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consevamus ullamcorper aliquam purus, et
            euismod justo. Nulla
          </p>
        </article>
        <article
          class="white-panel wow slideInRight"
          data-wow-duration="1.5s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/1-1.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula
            enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper
            aliquam purus, et euismod justo. Nulla
          </p>
        </article>
        <article
          class="white-panel wow slideInLeft"
          data-wow-duration="1.5s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/9.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            sollicitudin elit. Curabitur magna ligula, condimentum sed lacus
            nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula
            enim, auctor eget rutrum a, convallis non diam.
          </p>
        </article>

        <article
          class="white-panel wow slideInDown"
          data-wow-duration="1.5s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/05.jpg"
            alt="ALT"
          />

          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </article>

        <article
          class="white-panel wow flipInLeft"
          data-wow-duration="1.5s"
          data-wow-delay="1s"
        >
          <img
            src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/03/h5.jpg"
            alt="ALT"
          />
          <h1>
            <a href="#"
              >Fantasy football and Raphaël: the vector graphic JS library</a
            >
          </h1>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </article>
      </section>
    </div>

    <script src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/02/jquery.min_.js"></script>
    <script src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/04/pinterest_grid.js"></script>
    <!-- <script src="..//wow.min.js"></script> -->
    <script>
      $(document).ready(function () {
        $("#blog-landing").pinterest_grid({
          no_columns: 4,
          padding_x: 10,
          padding_y: 10,
          margin_bottom: 50,
          single_column_breakpoint: 700,
        });
      });
      $(function () {
        // animate on scroll
        new WOW().init();
      });
    </script>
  </body>
</html>
